import React, { useState } from "react";
import {
  Animated,
  Text,
  View
} from "react-native";
import ScrollView = Animated.ScrollView;
import { Button, Flex, WingBlank} from "@ant-design/react-native";
// @ts-ignore
import AntDesign from "react-native-vector-icons/AntDesign";

const App = () => {
  const size = 20;
  const style = {
    borderRadius: size / 2,
    backgroundColor: "#527fe4",
    width: size,
    height: size,
    margin: 1
  };
  return (
    <View style={{ height: "100%", width: "100%" }}>
      <Text>Flex布局</Text>
      <ScrollView
        style={{ flex: 1 }}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <WingBlank style={{ marginTop: 20, marginBottom: 5 }}>
          <Text style={{ marginTop: 20 }}>项目排列方向</Text>
          <Text>direction='row'主轴为水平方向，起点在左端</Text>
        </WingBlank>
        <WingBlank style={{ marginBottom: 5 }}>
          <Flex>
            <Flex.Item style={{ paddingLeft: 4, paddingRight: 4 }}>
              <Button size="small">导入</Button>
            </Flex.Item>
            <Flex.Item style={{ paddingLeft: 4, paddingRight: 4 }}>
              <Button size="small">导出</Button>
            </Flex.Item>
            <Flex.Item style={{ paddingLeft: 4, paddingRight: 4 }}>
              <Button size="small">批量处理</Button>
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WingBlank style={{ marginTop: 5, marginBottom: 5 }}>
          <Text>direction='column'主轴为垂直方向，起点在上沿</Text>
        </WingBlank>
        <WingBlank style={{ marginBottom: 5 }}>
          <Flex direction="column">
            <Flex.Item style={{ paddingBottom: 4 }}>
              <Button size="small" type="primary">
                登入
              </Button>
            </Flex.Item>
            <Flex.Item style={{ paddingBottom: 4 }}>
              <Button size="small" type="primary">
                登出
              </Button>
            </Flex.Item>
            <Flex.Item style={{ paddingBottom: 4 }}>
              <Button size="small" type="warning">
                注销
              </Button>
            </Flex.Item>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>justify='center' 居中</Text>
        </WingBlank>
        <WingBlank style={{marginBottom: 5}}>
          <Flex justify="center">
            <AntDesign
              name={"bars"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"bars"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"bars"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"bars"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"bars"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>justify='center' 右对齐</Text>
        </WingBlank>
        <WingBlank style={{marginBottom: 5}}>
          <Flex justify="end">
            <AntDesign
              name={"checkcircle"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"checkcircle"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"checkcircle"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"checkcircle"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"checkcircle"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>justify='left' 左对齐</Text>
        </WingBlank>
        <WingBlank style={{marginBottom: 5}}>
          <Flex justify="start">
            <AntDesign
              name={"codepen"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"codepen"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"codepen"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"codepen"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"codepen"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>justify = 'between' 两端对齐</Text>
        </WingBlank>
        <WingBlank>
          <Flex justify="between">
            <AntDesign
              name={"antdesign"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"antdesign"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"antdesign"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"antdesign"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"antdesign"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>justify = 'between' 平均对齐</Text>
        </WingBlank>
        <WingBlank>
          <Flex justify="around">
            <AntDesign
              name={"earth"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"earth"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"earth"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"earth"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"earth"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>换行</Text>
        </WingBlank>
        <WingBlank>
          <Flex wrap="wrap">
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"gitlab"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
        <WingBlank style={{marginTop: 5, marginBottom: 5}}>
          <Text>不换行</Text>
        </WingBlank>
        <WingBlank>
          <Flex wrap="nowrap">
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
            <AntDesign
              name={"dribbble"}
              size={27}
            >
            </AntDesign>
          </Flex>
        </WingBlank>
      </ScrollView>
    </View>
  );
};
export default App;



/**
 * Flex - API
 *
 * direction -row、column
 * wrap - wrap、nowrap
 * justify - start、end、center、between、around
 * align - start、end、center、stretch
 *
 * Flex.Item 默认加了样式flex:1，但是Flex的children不一定是平分
 * */
